<template>
  <div style="position: relative; overflow: hidden; height: 720px">
    <div class="exhibits-box">
      <div class="titleText" ref="titleText">
        <titles :title="props.info.text" />
        <div class="subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</div>
      </div>
      <div class="content" ref="content">
        <div
          ref="contentLeft"
          class="content_left"
          :style="{
            marginRight: props.tabDatas.length === 2 ? '80px' : '50px',
          }"
        >
          <!-- <div> -->
          <!-- <textMax :data="props.info.remarks" :maxLen="94" :tip="''" :maxMargin="0" /> -->
          <div class="remarks">{{ props.info.remarks }}</div>
          <!-- </div> -->

          <div
            @click="pathChild"
            :style="{
              fontSize: store.styleInfo.mintitleSize,
              color: '#fff',
            }"
            class="left-btn flex-c-c-c"
          >
            <div class="btn-img">
              <buttonIcon />
            </div>
            <span>查看全部</span>
          </div>
        </div>
        <div class="content_right" v-if="props.tabDatas.length <= 3">
          <div
            v-for="item in props.tabDatas"
            :key="item.id"
            class="exhibitsRightImageBox"
            ref="exhibitsRightImageBox"
            :style="{
              width: props.tabDatas.length === 2 ? '340px' : '230px',
            }"
            style="cursor: pointer"
            @click="pathInfo(item.id)"
          >
            <div class="item-left-img-box" @mouseenter="boxOver(item.coverUrl)" @mouseleave="mouseleave">
              <t-image
                fit="cover"
                class="item-left-img"
                :src="
                  $filters.getLinkUrl(
                    item.coverUrl,
                    `?imageView2/1/w/${props.tabDatas.length === 2 ? 340 : 230}/h/450/format/webp`,
                  )
                "
                alt=""
              />

              <div class="shadow"></div>
              <div
                class="item-heard"
                :style="{
                  width: props.tabDatas.length === 2 ? '340px' : '230px',
                }"
              >
                <span class="titleText" :style="{}"> {{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else style="position: relative" class="content_right">
          <div ref="arrowBox" class="arrowBox1">
            <div
              class="arrow-box-left"
              :style="{
                opacity: current === 0 ? '0.3' : '1',
                background: store.styleInfo.shmentColor,
              }"
              style="cursor: pointer"
            >
              <arrowLeft @click="addCruuent(-1)" />
            </div>
          </div>
          <div style="overflow: hidden">
            <div
              ref="exhibitsRightImage"
              class="exhibitsRightImage"
              :style="{
                width: `${250 * props.tabDatas.length}px`,
              }"
            >
              <!-- {{ props.tabDatas }} -->
              <div
                class="exhibitsRightImageBox"
                ref="exhibitsRightImageBox"
                v-for="item in props.tabDatas"
                :key="item.id"
                @click="pathInfo(item.id)"
                style="cursor: pointer"
              >
                <div class="item-left-img-box" @mouseenter="boxOver(item.coverUrl)" @mouseleave="mouseleave">
                  <t-image
                    class="item-left-img"
                    :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/230/h/378/format/webp')"
                    alt=""
                  />
                  <div class="shadow"></div>
                  <div
                    class="item-heard"
                    :style="{
                      width: props.tabDatas.length === 2 ? '340px' : '230px',
                    }"
                  >
                    <span class="titleText" :style="{}"> {{ item.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div ref="arrowBox2" class="arrowBox2">
            <div
              class="arrow-box-right"
              :style="{
                opacity: current === props.tabDatas.length - 3 ? '0.3' : '1',
                background: store.styleInfo.shmentColor,
              }"
              style="cursor: pointer"
            >
              <arrowRight @click="addCruuent(1)" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <img
      v-if="currentUrl"
      :class="{ 'exhibits-box-bg-null': !currentUrl && innerWidth == 0 }"
      class="exhibits-box-bg t-image t-image--fit-cover t-image--position-center"
      :src="$filters.getLinkUrl(currentUrl, '')"
      alt=""
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { onMounted, ref, watch } from 'vue';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { useProjectStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import textMax from '@/components/textMax/textMax.vue';
import arrowLeft from '../publicComponents/components/arrowLeft.vue';
import arrowRight from '../publicComponents/components/arrowRight.vue';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const pathChild = () => {
  store.setchildModel(props.info);
  store.setCurrent(0);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { childId: props.info.id },
  });
};

const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
});
const exhibitsRightImage = ref(null);
const exhibitsRightImageBox = ref(null);
const contentLeft = ref(null);
const content = ref(null);
const titleText = ref(null);
const arrowBox = ref(null);
const arrowBox2 = ref(null);
const current = ref(0);
const currentUrl = ref('');
const innerWidth = ref(window.innerWidth);
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: props.info.id },
  });
};
const addCruuent = (num: number) => {
  if (current.value === 0 && num < 0) {
    return;
  } else if (current.value === props.tabDatas.length - 3 && num > 0) {
    return;
  } else {
    current.value = current.value + num;
    exhibitsRightImage.value.style.transform = `translateX(${-250 * current.value}px)`;
  }
};
onMounted(() => {
  window.addEventListener('resize', function () {
    var screenWidth = window.innerWidth;
    // 在这里执行屏幕宽度变化时的操作
    // //console.log('屏幕宽度:', screenWidth);
    innerWidth.value = screenWidth;
  });
  animation1();
  animation2();
  animation3();
  // //console.log(exhibitsRightImageBox.value);
});
const animation1 = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        titleText.value.classList.add('animation-box');
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (titleText.value) {
        //   titleText.value.classList.remove('animation-box');
        // }
      }
    });
  });
  observer.observe(titleText.value);
};
const animation2 = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        contentLeft.value.classList.add('animation-box2');
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (contentLeft.value) {
        //   contentLeft.value.classList.remove('animation-box2');
        // }
      }
    });
  });
  observer.observe(contentLeft.value);
};
const animation3 = () => {
  const observer1 = new IntersectionObserver((entries) => {
    let canTrigger1 = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger1) {
        //console.log('exhibitsRightImageBox', exhibitsRightImageBox);
        for (let index = exhibitsRightImageBox.value.length - 1; index > -1; index--) {
          setTimeout(() => {
            exhibitsRightImageBox.value[index].classList.add('animation-box3');
          }, 300 * (exhibitsRightImageBox.value.length - index));
        }
        if (arrowBox.value) {
          setTimeout(() => {
            arrowBox.value.classList.add('animation-box3');
            arrowBox2.value.classList.add('animation-box3');
          }, 2000);
        }
        // 设置一个延迟时间，防止频繁触发
        canTrigger1 = false;
        setTimeout(() => {
          canTrigger1 = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (exhibitsRightImageBox.value) {
        //   for (let i = 0; i < exhibitsRightImageBox.value.length; i++) {
        //     exhibitsRightImageBox.value[i].classList.remove('animation-box3');
        //   }
        // }
        // if (arrowBox.value) {
        //   arrowBox.value.classList.remove('animation-box3');
        //   arrowBox2.value.classList.remove('animation-box3');
        // }
      }
    });
  });
  observer1.observe(contentLeft.value);
};
const boxOver = (item: any) => {
  // //console.log('item', item);
  if (boxOver !== currentUrl.value) {
    currentUrl.value = item;
  }
};
const mouseleave = () => {
  currentUrl.value = '';
  // //console.log('+');
};
watch(
  () => props.tabDatas,
  () => {
    //console.log(props.tabDatas, 'props');
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import './index.less';
@import './exhibits7.less';
.animation-box {
  animation: slideIn 0.5s forwards;
}
@keyframes slideIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.exhibits-box-bg {
  opacity: 1;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  transition: all 0.8s;
  z-index: 1;
}
.exhibits-box {
  padding: 80px 0;
  // position: relative;
  transition: all 0.5s;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  // width: 1180px;
  margin: auto;
  height: 100%;
  // opacity: 0.2;
  transition: all 0.5s;
  z-index: 333;
  // .parent-box {
  //   padding-bottom: 95px;
  // }
}
:deep(.parent-box) {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  width: 1180px;
  display: flex;
  .content_left {
    width: 400px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .content_right {
    width: 730px;
    height: 378px;
    display: flex;
    flex: 1;
    .exhibitsRightImageBox {
      width: 230px;
      height: 378px;
      margin-right: 20px;
      opacity: 0;
      flex-shrink: 0;
      .item-left-img-box {
        height: 378px;
        transition: all 0.5s;
        .item-left-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .exhibitsRightImageBox:last-child {
      margin-right: 0;
    }
    .exhibitsRightImage {
      display: flex;
      overflow-x: scroll;
      transition: all 0.5s;
    }
  }
}
.titleText {
  height: 106px;
}
.remarks {
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 4; //行数
  line-clamp: 4;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
  font-size: 16px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  font-weight: 500;
  color: #333333;
  line-height: 32px;
  text-align: justify;
}
.exhibits-box-bg-null {
  opacity: 0;
}
/deep/.t-image {
  object-fit: cover;
}
</style>
